import React,{useState,useEffect} from 'react'
import food1 from '../../static/img/food/food1.gif'
import './index.css'
import Search from '../../components/Search'
import { useNavigate } from 'react-router-dom';
import { Pagination} from 'antd';
export default function Classify() {
    const [count, setcount] = useState({information:[],place:[],kind:[]})
      useEffect(() => {

        setcount({
            place:['河南省','陕西省','河南省','陕西省','河南省','陕西省'],
             kind:['红富士苹果','洛川苹果','红富士苹果','洛川苹果','红富士苹果','洛川苹果'],
             information:[
                    {
                    title:'新西兰佳沛黄金奇异果',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'18.80',
                        old_price:'50.00',
                        s_id:'0' ,
                        },
                    {
                    title:'新西兰佳沛黄金奇异果',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'8.80',
                        old_price:'30.00',
                        s_id:'1' ,
                    },
                    {
                    title:'新西兰佳沛黄金奇异果',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'22.80',
                        old_price:'35.00',
                        s_id:'2' ,
                    },
                    {
                        title:'新西兰佳沛黄金奇异果',
                            tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                            new_price:'25.80',
                            old_price:'42.00',
                            s_id:'3' ,
                            },
                    {
                        title:'新西兰佳沛黄金奇异果',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'22.80',
                        old_price:'42.00',
                        s_id:'4' ,
                    },
                   {
                        title:'新西兰佳沛黄金奇异果',
                        tip:'果肉绵密、花蜜般的甘甜百吃不厌',
                        new_price:'28.20',
                        old_price:'40.00',
                        s_id:'5' ,
                    },
                ]
        })
      }, [])
    function lxCheck(num) {
        return ()=>{
            let span= document.getElementsByClassName('foodLisBtn')[0].getElementsByTagName('span')
            for(let i = 0;i<span.length;i++){
                span[i].className=''
            }
            span[num].className='check'
        }
    }
    function updown() {
        return()=>{
            setupOrdown(!upOrdown)
        }
    }
    const [upOrdown, setupOrdown] = useState(true)
    //全国\次日达按钮点击变色和选择加入购物车规格变色
    const [countarr,setcountarr]=useState({
        countarr:'',
        nextday:'',
        kmg:[],})

    function changecolor(){
        const changecolor =JSON.parse(JSON.stringify(countarr))
        changecolor.countarr=!changecolor.countarr
        setcountarr(changecolor)
    }
    function changecolor2(){
        const changecolor2 =JSON.parse(JSON.stringify(countarr))
        changecolor2.nextday=!changecolor2.nextday
        setcountarr(changecolor2)
    }
      //点击改变选择规格的边框和背景
      function ischocemg(i){
        const ischoceit =JSON.parse(JSON.stringify(countarr))
        for (let index = 0; index < ischoceit.kmg.length; index++) {
            ischoceit.kmg[index].ischeck=false   
        }
        ischoceit.kmg[i].ischeck = !ischoceit.kmg[i].ischeck
        setcountarr(ischoceit)
    }
    useEffect(() => {
        document.getElementsByClassName('foodLisBtn')[0].getElementsByTagName('span')[0].className='check'
        setcountarr({
            countarr:false,
            nextday:false,
            kmg:[
            {mg:500,ischeck:false},
            {mg:1000,ischeck:false},
            {mg:1500,ischeck:false},
            {mg:2000,ischeck:false}
            ]
        })
        // document.getElementsByClassName('foodType')[0].getElementsByTagName('a')[0].className='check'
        // document.getElementsByClassName('foodType')[1].getElementsByTagName('a')[0].className='check'
    }, [])
    //导航变色
    function typeCheck(num) {
        return ()=>{
            let a= document.getElementsByClassName('foodType')[0].getElementsByTagName('a')
            for(let i = 0;i<a.length;i++){
                a[i].className=''
            }
            a[num].className='check'
        }
    }
    function typeCheck2(num) {
        return ()=>{
            let a= document.getElementsByClassName('foodType')[1].getElementsByTagName('a')
            for(let i = 0;i<a.length;i++){
                a[i].className=''
            }
            a[num].className='check'
        }
    }
        //点击跳转详情页
            const navigate = useNavigate()
            function lookCommodity(num) {
                return ()=>{
                    navigate('/tocar?'+num)
                }
            }
        //点击购物车小图标的按钮弹出加入购物车的弹窗
        const [ischoceshop,setchoceshop] =useState({id:'',nowprice:'',oldprice:''})
        function addcar(id,nowprice,oldprice){
            const carwindow = document.getElementsByClassName('C-modul')[0]
            carwindow.className='C-modulshow'
            setchoceshop({id:id,nowprice:nowprice,oldprice:oldprice})
        }
        //点击弹窗的加入购物车的按钮
        function addtocar(){
           const a= countarr.kmg.filter(v=>{
               return v.ischeck===true
           })
            const addshop ={id:ischoceshop.id,price:ischoceshop.nowprice,nums:countaddcar,mg:a[0].mg}
            console.log(addshop);
            const modul=document.getElementsByClassName('C-modulshow')[0]
            modul.className='C-modul'
        }
    //点击加号购物车-1
    //购物车初始化
    const [countaddcar, setaddcar] = useState(0)
    function loseone(){
        if (countaddcar>0) {
            setaddcar(countaddcar-1)
        }else{
            setaddcar(0)
        }
    }

            return (
        <div>
           <Search></Search>
           <hr/>
           <div className="P-top">
                <ul>
                    <li>您的当前位置:</li>
                    <li>首页&nbsp;<i className='fa fa-angle-right'></i></li>
                    <li>全部商品&nbsp;<i className='fa fa-angle-right'></i></li>
                    <li>苹果&nbsp;<i className='fa fa-angle-right'></i></li>
                    <li>阿苏克</li>
                </ul>
            </div>
            <div className="oneclassify">
            <div className="foodType">
                    <i>产地 : </i>
                    {count.place.map((foodType,i)=>{
                        return <a href="###" key={i} onClick={typeCheck(i)}>{foodType}</a>
                    })}
            </div>

            </div>
            <div className="oneclassify">
            <div className="foodType">
                    <i>品种 : </i>
                    {count.kind.map((foodType,i)=>{
                        return <a href="###" key={i} onClick={typeCheck2(i)}>{foodType}</a>
                    })}
            </div>
            </div>
           
            <div className="C-middle">
            <div className='foodLisBtn'>
                    <span className="btn" onClick={lxCheck(0)}>销量</span>
                    <span className="btn" onMouseUp={lxCheck(1)} onMouseDown={updown()}><strong>价格</strong> <i className="fa fa-caret-up up" id={!upOrdown?'':'anthis'}></i><i className="fa fa-caret-down down" id={upOrdown?'':'anthis'}></i></span>
                    <span className="btn" onClick={lxCheck(2)}>评价最高</span>
                    <div className="C-screen">
                        <strong>筛选:</strong>
                        <span className={countarr.countarr ? 'C-green':'C-gray'} onClick={changecolor}>全国</span>
                        <span className={countarr.nextday ? 'C-green':'C-gray'} onClick={changecolor2}>次日达</span>
                    </div>
            </div>
            
            <ul className="homeLi-main">
                {
                count.information.map((homeData,i)=>{
                    return(
                        <li key={i}>
                        <img src={food1} alt="" />
                        <h3 onClick={lookCommodity(homeData.s_id)}>{homeData.title}</h3>
                        <h4>{homeData.tip}</h4>
                        <span className="new_price">￥{homeData.new_price}</span><span className="old_price">￥{homeData.old_price}</span><i className="fa fa-shopping-cart" onClick={()=>addcar(homeData.s_id,homeData.new_price,homeData.old_price)}></i>
                    </li>
                    )
                })
                }
            </ul>
            </div>
            <div className="peges">
                    <Pagination showQuickJumper defaultCurrent={1} total={500} pageSize={12} />
            </div>
            <div className="C-modul">
                <h4>请选择产品规格</h4>
                <hr />
                <div className="nowprice">
                        <strong>现价：￥{ischoceshop.nowprice}</strong>&nbsp;&nbsp;&nbsp;<span>原价：{ischoceshop.oldprice}</span>
                    </div>
                    <div className="chocekg">
                        <div className="ischocekg">请选择规格</div>
                        {
                        countarr.kmg.map((v,i)=>{
                            return(
                        <div className={v.ischeck ? 'kgnum1' :'kgnum'} onClick={()=>ischocemg(i,v.mg)} key={i}>{v.mg}</div>
                            )
                        })
                        }
                      
                        <div className="addchar">
                            <div className="ischocekg">数量:</div>
                            <div className="addnum">
                                <div className="losenum" onClick={loseone}><i className='fa fa-minus'></i></div>
                                <div className="carnums">{countaddcar}</div>
                                <div className="losenum" onClick={()=>setaddcar(countaddcar+1)}><i className='fa fa-plus'></i></div>
                            </div>
                            <div className="to-cart" onClick={addtocar}>
                                添加到购物车
                            </div>
                           
                        </div>
                        
                    </div>
            </div>

        </div>
    )
}
